<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>冶金实验室综合检测报表（仅展示）</title>
	<!-- 引入依赖 -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
	<style>
		.chart-module {
			margin-bottom: 30px;
			padding: 15px;
			border: 1px solid #eee;
			border-radius: 4px;
		}
		.chart-container {
			height: 400px;
			margin-top: 15px;
		}
	</style>
</head>
<body>
<div class="container" style="margin-top: 20px;">
	<h2 class="text-center">冶金实验室综合检测数据报表</h2>

	<!-- 1. 样品信息模块（饼图+柱状图） -->
	<div class="chart-module">
		<h3>1. 样品信息统计</h3>
		<div class="row">
			<div class="col-md-6">
				<div class="chart-container">
					<canvas id="sampleTypePie"></canvas>
				</div>
			</div>
			<div class="col-md-6">
				<div class="chart-container">
					<canvas id="sampleSourceBar"></canvas>
				</div>
			</div>
		</div>
	</div>

	<!-- 2. 检测任务模块（柱状图+折线图） -->
	<div class="chart-module">
		<h3>2. 检测任务统计</h3>
		<div class="row">
			<div class="col-md-6">
				<div class="chart-container">
					<canvas id="taskTypeBar"></canvas>
				</div>
			</div>
			<div class="col-md-6">
				<div class="chart-container">
					<canvas id="taskTimeLine"></canvas>
				</div>
			</div>
		</div>
	</div>

	<!-- 3. 检测结果模块（柱状图对比） -->
	<!--<div class="chart-module">
		<h3>3. 检测结果对比</h3>
		<div class="chart-container">
			<canvas id="resultCompareBar"></canvas>
		</div>
	</div>-->

	<!-- 4. 检测项字典模块（雷达图） -->
	<div class="chart-module">
		<h3>3. 检测项标准范围</h3>
		<div class="chart-container">
			<canvas id="itemStandardRadar"></canvas>
		</div>
	</div>
</div>

<script>
	// 全局图表实例（分模块存储）
	const charts = {
		sampleTypePie: null,
		sampleSourceBar: null,
		taskTypeBar: null,
		taskTimeLine: null,
		resultCompareBar: null,
		itemStandardRadar: null
	};

	$(function() {
		// 页面加载时自动加载所有数据
		loadSampleData();
		loadTaskData();
		loadResultData();
		loadItemData();
	});

	// -------------------------- 1. 样品信息模块 --------------------------
	function loadSampleData() {
		// 无筛选条件，加载所有样品数据
		$.ajax({
			url: "/system/sample/list",
			type: "POST",
			data: {},
			dataType: "json",
			success: (res) => {
				if (res.code === 0 && res.rows.length > 0) {
					renderSampleCharts(res.rows);
				} else {
					clearCharts(['sampleTypePie', 'sampleSourceBar']);
				}
			}
		});
	}

	function renderSampleCharts(data) {
		// 样品类型占比（饼图）
		const typeData = countByField(data, 'sampleType');
		charts.sampleTypePie = new Chart(document.getElementById('sampleTypePie'), {
			type: 'pie',
			data: {
				labels: Object.keys(typeData),
				datasets: [{
					data: Object.values(typeData),
					backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF']
				}]
			},
			options: { title: { display: true, text: '样品类型占比' } }
		});

		// 样品来源分布（柱状图）
		const sourceData = countByField(data, 'source', '未知来源');
		charts.sampleSourceBar = new Chart(document.getElementById('sampleSourceBar'), {
			type: 'bar',
			data: {
				labels: Object.keys(sourceData),
				datasets: [{ label: '样品数量', data: Object.values(sourceData), backgroundColor: '#4BC0C0' }]
			},
			options: { title: { display: true, text: '样品来源分布' }, scales: { y: { beginAtZero: true } } }
		});
	}

	// -------------------------- 2. 检测任务模块 --------------------------
	function loadTaskData() {
		// 无筛选条件，加载所有任务数据
		$.ajax({
			url: "/system/task/list",
			type: "POST",
			data: {},
			dataType: "json",
			success: (res) => {
				if (res.code === 0 && res.rows.length > 0) {
					renderTaskCharts(res.rows);
				} else {
					clearCharts(['taskTypeBar', 'taskTimeLine']);
				}
			}
		});
	}

	function renderTaskCharts(data) {
		// 任务类型数量（柱状图）
		const typeData = countByField(data, 'detectionType');
		charts.taskTypeBar = new Chart(document.getElementById('taskTypeBar'), {
			type: 'bar',
			data: {
				labels: Object.keys(typeData),
				datasets: [{ label: '任务数量', data: Object.values(typeData), backgroundColor: '#36A2EB' }]
			},
			options: { title: { display: true, text: '检测任务类型分布' }, scales: { y: { beginAtZero: true } } }
		});

		// 任务完成时间趋势（折线图，按日期分组）
		const timeData = countByDate(data, 'actualCompleteTime');
		charts.taskTimeLine = new Chart(document.getElementById('taskTimeLine'), {
			type: 'line',
			data: {
				labels: Object.keys(timeData),
				datasets: [{ label: '每日完成任务数', data: Object.values(timeData), borderColor: '#FF6384', tension: 0.1 }]
			},
			options: { title: { display: true, text: '任务完成时间趋势' }, scales: { y: { beginAtZero: true } } }
		});
	}

	// -------------------------- 3. 检测结果模块 --------------------------
	function loadResultData() {
		// 无筛选条件，加载所有结果数据
		$.ajax({
			url: "/system/result/list",
			type: "POST",
			data: {},
			dataType: "json",
			success: (res) => {
				if (res.code === 0 && res.rows.length > 0) {
					renderResultChart(res.rows);
				} else {
					clearCharts(['resultCompareBar']);
				}
			}
		});
	}

	function renderResultChart(data) {
		// 检测结果与标准值对比（柱状图）
		const labels = data.map(item => item.itemName);
		const actualValues = data.map(item => item.actualValue);
		const standardValues = data.map(item => (item.minStandard + item.maxStandard) / 2 || 0); // 标准中值

		charts.resultCompareBar = new Chart(document.getElementById('resultCompareBar'), {
			type: 'bar',
			data: {
				labels: labels,
				datasets: [
					{ label: '实测值', data: actualValues, backgroundColor: '#4BC0C0' },
					{ label: '标准中值', data: standardValues, backgroundColor: '#FFCE56' }
				]
			},
			options: { title: { display: true, text: '检测结果与标准值对比' }, scales: { y: { beginAtZero: true } } }
		});
	}

	// -------------------------- 4. 检测项字典模块 --------------------------
	function loadItemData() {
		// 无筛选条件，加载所有检测项数据
		$.ajax({
			url: "/system/item/list",
			type: "POST",
			data: {},
			dataType: "json",
			success: (res) => {
				if (res.code === 0 && res.rows.length > 0) {
					renderItemChart(res.rows.slice(0, 6)); // 限制最多6个项，避免雷达图拥挤
				} else {
					clearCharts(['itemStandardRadar']);
				}
			}
		});
	}

	function renderItemChart(data) {
		// 检测项标准范围（雷达图）
		const labels = data.map(item => item.itemName);
		const minData = data.map(item => item.minStandard || 0);
		const maxData = data.map(item => item.maxStandard || 0);

		charts.itemStandardRadar = new Chart(document.getElementById('itemStandardRadar'), {
			type: 'radar',
			data: {
				labels: labels,
				datasets: [
					{ label: '标准最小值', data: minData, borderColor: '#36A2EB', backgroundColor: 'rgba(54, 162, 235, 0.2)' },
					{ label: '标准最大值', data: maxData, borderColor: '#FF6384', backgroundColor: 'rgba(255, 99, 132, 0.2)' }
				]
			},
			options: { title: { display: true, text: '检测项标准范围雷达图' }, scales: { r: { beginAtZero: true } } }
		});
	}

	// -------------------------- 工具函数 --------------------------
	// 按字段统计数量
	function countByField(data, field, defaultValue = '未知') {
		const map = {};
		data.forEach(item => {
			const key = item[field] || defaultValue;
			map[key] = (map[key] || 0) + 1;
		});
		return map;
	}

	// 按日期统计（格式化到天）
	function countByDate(data, field) {
		const map = {};
		data.forEach(item => {
			if (!item[field]) return;
			const date = new Date(item[field]).toLocaleDateString(); // 格式：YYYY-MM-DD
			map[date] = (map[date] || 0) + 1;
		});
		// 按日期排序
		return Object.keys(map).sort().reduce((obj, key) => { obj[key] = map[key]; return obj; }, {});
	}

	// 清空指定图表
	function clearCharts(chartNames) {
		chartNames.forEach(name => {
			if (charts[name]) {
				charts[name].destroy();
				charts[name] = null;
			}
		});
	}
</script>
</body>
</html>